<template>
  <view class="container">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @click="goBack">
        <text class="nav-icon">←</text>
      </view>
      <text class="nav-title">房间设计</text>
      <view class="nav-right"></view>
    </view>
    
    <!-- 主内容区 -->
    <view class="main-content">
      <!-- 图片展示区 -->
	  <view class="photo-section">
	    <image :src="photoUrl" mode="aspectFit" class="room-photo" />
	  </view>
      
      <!-- 设计风格选项区 -->
      <view class="style-options">
        <text class="section-title">选择设计风格</text>
        <scroll-view scroll-x class="style-scroll" show-scrollbar="false">
          <view class="style-grid">
            <view 
              v-for="(style, index) in styleList" 
              :key="index"
              class="style-item"
              :class="{ active: selectedStyle.value === style.value }"
              @click="selectStyle(style.value)"
            >
              <image class="style-image" :src="style.imageUrl" mode="aspectFill" />
              <text class="style-name">{{ style.label }}</text>
            </view>
          </view>
        </scroll-view>
      </view>

      <!-- 设计操作区 -->
      <view class="design-controls">
        <text class="design-tip" v-if="!selectedStyle.value">请先选择一种设计风格</text>
        <text class="design-tip selected" v-else>已选择：{{ styleList.find(item => item.value === selectedStyle.value)?.label }}</text>
        <button class="design-btn" @click="startDesign" :class="{ 'active': selectedStyle.value }">开始设计</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 状态变量
const photoUrl = ref('')
const roomImagePath = ref('')
const selectedStyle = ref('')

// 设计风格列表
const styleList = [
  { label: '中式风', value: 'chinese', imageUrl: '/static/images/styles/chinese.jpg' },
  { label: '中古风', value: 'chinoiserie', imageUrl: '/static/images/styles/chinoiserie.jpg' },
  { label: '日式风', value: 'japanese', imageUrl: '/static/images/styles/japanese.jpg' },
  { label: '欧式风', value: 'european', imageUrl: '/static/images/styles/european.jpg' },
  { label: '美式风', value: 'american', imageUrl: '/static/images/styles/american.jpg' },
  { label: '侘寂风', value: 'wabi-sabi', imageUrl: '/static/images/styles/wabi-sabi.jpg' },
  { label: '工业风', value: 'industrial', imageUrl: '/static/images/styles/industrial.jpg' },
  { label: '复古风', value: 'retro', imageUrl: '/static/images/styles/retro.jpg' },
  { label: '法式风', value: 'french', imageUrl: '/static/images/styles/french.jpg' },
  { label: '极简风', value: 'minimalist', imageUrl: '/static/images/styles/minimalist.jpg' },
  { label: '原木风', value: 'natural', imageUrl: '/static/images/styles/natural.jpg' },
  { label: '淡系奶油风', value: 'cream', imageUrl: '/static/images/styles/cream.jpg' },
  { label: '北欧风', value: 'nordic', imageUrl: '/static/images/styles/nordic.jpg' },
  { label: '新中式风', value: 'neo-chinese', imageUrl: '/static/images/styles/neo-chinese.jpg' },
  { label: '轻奢风', value: 'light-luxury', imageUrl: '/static/images/styles/light-luxury.jpg' },
  { label: '现代简约风', value: 'modern', imageUrl: '/static/images/styles/modern.jpg' },
  { label: '后现代风', value: 'post-modern', imageUrl: '/static/images/styles/post-modern.jpg' },
  { label: '田园风', value: 'pastoral', imageUrl: '/static/images/styles/pastoral.jpg' }
]

// 页面加载
onMounted(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const eventChannel = currentPage.getOpenerEventChannel()
  
  // 获取传递的照片URL
  const query = currentPage.$page.options
  if (query.imagePath) {
    photoUrl.value = decodeURIComponent(query.imagePath)
    roomImagePath.value = photoUrl.value
    console.log('获取到的图片路径:', photoUrl.value)
  }
})

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 选择设计风格
const selectStyle = (styleValue) => {
  selectedStyle.value = styleValue
  console.log('选择的设计风格:', styleValue)
}

// 开始设计
const startDesign = () => {
  if (!roomImagePath.value) {
    uni.showToast({
      title: '请先选择房间图片',
      icon: 'none'
    })
    return
  }
  
  if (!selectedStyle.value) {
    uni.showToast({
      title: '请选择设计风格',
      icon: 'none'
    })
    return
  }
  
  // 这里可以添加设计相关的逻辑
  uni.showLoading({
    title: '正在处理...'
  })
  
  // 模拟设计过程
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '设计完成',
      icon: 'success'
    })

      // 调用后端接口
  uni.request({
          url: 'http://localhost:9668/aipaizhao/generateImageFromText', // 替换为实际的API地址
          method: 'POST',
          data: {
            prompt: selectedStyle.value,
            roomImageUrl: roomImagePath.value, // 确保图片路径已正确处理
          },
          header: {
            'content-type': 'application/json'
          },
          success: (res) => {
            console.log('请求成功:', res)
            if (res.statusCode === 200 && res.data) {
              // 保存生成的图片结果
              uni.setStorageSync('generatedDesign', res.data.imageUrl)
              console.log('图片生成成功:', res.data)
              // 跳转到拍照设计结果页面
              uni.navigateTo({
                url: '/pages/design/photo-result?photo=' + encodeURIComponent(res.data.imageUrl)
              })
            } else {
              console.error('图片生成失败:', res.data)
              uni.showToast({
                title: '生成失败，请重试',
                icon: 'none'
              })
            }
          }})
  }, 2000)
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f8f9fa;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx;
  background: #ffffff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .nav-left, .nav-right {
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .nav-icon {
    font-size: 44rpx;
    color: #333;
  }
  
  .nav-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
}

.main-content {
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 128rpx);
}

.image-display {
  flex: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 24rpx;
  margin-bottom: 32rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  
  .room-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  .no-image {
    padding: 48rpx;
    text-align: center;
    color: #999;
    font-size: 32rpx;
  }
}

.style-options {
  margin-bottom: 32rpx;
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    display: block;
  }
  
  .style-scroll {
    width: 100%;
    white-space: nowrap;
  }
  
  .style-grid {
    display: inline-flex;
    padding: 8rpx 0;
  }
  
  .style-item {
    width: 180rpx;
    margin-right: 24rpx;
    border-radius: 16rpx;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    
    &.active {
      transform: translateY(-6rpx);
      box-shadow: 0 8rpx 20rpx rgba(7, 193, 96, 0.2);
      border: 3rpx solid #07c160;
    }
    
    .style-image {
      width: 180rpx;
      height: 180rpx;
      object-fit: cover;
    }
    
    .style-name {
      display: block;
      text-align: center;
      font-size: 26rpx;
      color: #333;
      padding: 12rpx 0;
      background: #ffffff;
    }
    
    &.active .style-name {
      color: #07c160;
      font-weight: 600;
    }
  }
}

.design-controls {
  padding: 32rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .design-tip {
    font-size: 26rpx;
    color: #999;
    margin-bottom: 16rpx;
    text-align: center;
    
    &.selected {
      color: #07c160;
      font-weight: 500;
    }
  }
  
  .design-btn {
    width: 100%;
    height: 96rpx;
    background: linear-gradient(45deg, #07c160, #00b386);
    color: #fff;
    font-size: 32rpx;
    font-weight: 600;
    border-radius: 48rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.25);
    transition: all 0.3s ease;
    opacity: 0.85;
    
    &.active {
      opacity: 1;
      transform: translateY(-4rpx);
      box-shadow: 0 12rpx 30rpx rgba(7, 193, 96, 0.35);
    }
  }
}
</style>